<template>
	<div class="analysis_page">
	<el-tabs v-model="editableTabsValue" type="card" style="margin-top: 20px">
		<el-tab-pane label="题目数据">
		<div v-if="this.questionList.length == 0" style="margin-top: 20px">
			该问卷还没有设计题目
		</div>
		<div v-else>
		<div>
			<el-button type="primary" @click="preQuestion">上一题</el-button>
			<el-button type="primary" @click="nextQuestion">下一题</el-button>
		</div>
		<div style="padding-top: 30px;">
			<span style="font-weight: bold">第 {{questionIndex + 1}} 题：</span>{{questionList[questionIndex].title}}
		</div>
		<div style="padding-top: 30px">
			<div v-if="questionList[questionIndex].type == 'S' || questionList[questionIndex].type == 'M'">
				<el-table :data="questionList[questionIndex].data" border>
					<el-table-column prop="description" label="选项"></el-table-column>
					<el-table-column prop="count" label="数量" width="180"></el-table-column>
					<el-table-column prop="percentage" label="占比" width="180"></el-table-column>
				</el-table>
				<div class="optionpie">
					<div id ="optionpie1" style="width: 90%;height:450px;"></div>
				</div>
			</div>

			<div v-else-if="questionList[questionIndex].type == 'F'" style="margin-bottom: 20px">
				<el-table :data="questionList[questionIndex].data" border>
					<el-table-column prop="user" label="用户名"></el-table-column>
					<el-table-column prop="answer" label="回答记录"></el-table-column>
				</el-table>
			</div>
			<div v-else>
				<el-table :data="questionList[questionIndex].data" border>
					<el-table-column prop="answer" label="评分"></el-table-column>
					<el-table-column prop="count" label="数量" width="180"></el-table-column>
					<el-table-column prop="percentage" label="占比" width="180"></el-table-column>
				</el-table>
				<div class="optionpie">
					<div id ="optionpie2" style="width: 90%;height:450px;"></div>
				</div>
			</div>
		</div>
		</div>
		</el-tab-pane>
		<el-tab-pane label="答卷信息">
		<el-button type="primary">
			<download-excel :data="json_data" :fields="json_fields" name="答卷信息列表">导出Excel</download-excel>
		</el-button>
		<el-table :data="answerMsgList" border style="margin-top: 10px">
			<el-table-column prop="index" label="序号" ></el-table-column>
			<el-table-column prop="userName" label="用户名" ></el-table-column>
			<el-table-column prop="answer_time" label="提交时间" ></el-table-column>
		</el-table>
		</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import {GetAllQuestion, getSingleData, getMultiData, getFillingData, getRatingData, showAnswerSheet, getAnsSheetId} from '../../api'
import * as echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/pie';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/toolbox';
import 'echarts/lib/component/markPoint';
import 'echarts/lib/component/tooltip';
import { GridComponent } from 'echarts/components';
import Vue from 'vue';
import JsonExcel from 'vue-json-excel';
import moment from 'moment';

Vue.component('downloadExcel', JsonExcel);
echarts.use([GridComponent]);

export default ({
	data() {
		return {
			questionList: [],
			referList: [],
			questionIndex: 0,	//当前题目下标
			editableTabsValue: '0',
			answersheetIdList: [],
			answerMsgList: [],
			json_fields: {'序号': 'index', '用户名': 'userName', '提交时间': 'answer_time'},
			json_data: []
		}
	},
	props: ['questionnaire'],
	mounted() {
		this.initQuestionnaireData();
	},
	methods: {
		async initQuestionnaireData() {
			const result = await GetAllQuestion(this.$store.state.uid, this.questionnaire.id);
			this.referList = result.question_list;	//重新获取参照列表
			this.questionList.splice(0, this.questionList.length);	//清空旧问题列表

			await getSingleData(this.questionnaire.id).then(res => {
				this.insertQuestion(res, 'S');
			});
			await getMultiData(this.questionnaire.id).then(res => {
				this.insertQuestion(res, 'M');
			})
			await getFillingData(this.questionnaire.id).then(res => {
				this.insertQuestion(res, 'F');
			})
			await getRatingData(this.questionnaire.id).then(res => {
				this.insertQuestion(res, 'R');
			})
			this.questionIndex = 0;
			if (this.questionList.length != 0) {
				this.initChartAndTableData();
			}

			await getAnsSheetId(this.questionnaire.id).then(res => {
				this.answersheetIdList = res.answersheet_id_list;
			});
			var i;
			for (i = 0; i < this.referList.length; i++) {
				let str = '第' + (i + 1) + '题';
				this.json_fields[str] = i + 1;
			}
			this.answersheetIdList.forEach((item, index) => {
				showAnswerSheet(this.questionnaire.id, item).then(res => {
					var answerMsg = {};
					answerMsg.index = index + 1;
					res.answer_time = moment(res.answer_time).format('YYYY-MM-DD HH:mm:ss')
					answerMsg.answer_time = res.answer_time;
					answerMsg.userName = res.userName;
					this.$set(this.answerMsgList, index, answerMsg);
					res.answer_list.forEach(item => {
						answerMsg[item.order] = item.answer;
					})
					this.$set(this.json_data, index, answerMsg);
				})
			});
		},
		insertQuestion(res, type) {
			if (res.error_code == 0) {
				res.data_list.forEach(item => {
					let question = {};
					question.title = this.referList[item.order - 1].title;
					question.data = item.data;
					question.type = type;
					this.$set(this.questionList, item.order - 1, question);
				})
			}
		},
		initChartAndTableData() {
			let question = this.questionList[this.questionIndex];
			let optionDescription = [];
			let seriesData = [];
			if (question.type == 'S' || question.type == 'M') {
				this.myChart = echarts.init(document.getElementById('optionpie1'));
				question.data.forEach(item => {
					//需要parseFloat先转换，我也不知道为什么.
					item.percentage = parseFloat(item.percentage).toFixed(2); 
					let data = {};
					data.value = item.count;
					data.name = item.description; 
					optionDescription.push(item.description);
					seriesData.push(data);
				})
				const option = {
					title: {text: '选项占比', subtext: '', x: 'center'},
					tooltip: {
						trigger: 'item'
					},
					legend: {orient: 'vertical', left: 'left', data: optionDescription},
					series: [{
						name: '占比',
						type: 'pie',
						radius: '60%',
						center: ['50%', '60%'],
						data: seriesData,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};
				this.myChart.setOption(option);
			} else if (question.type == "R") {
				this.myChart = echarts.init(document.getElementById('optionpie2'));
				let fixedOrder = [];
				question.data.forEach(item => {
					item.percentage = parseFloat(item.percentage).toFixed(2);
					let data = {};
					data.value = item.count;
					if (typeof(item.answer) == 'number') {
						data.name = item.answer + '星';
						item.answer = item.answer.toFixed(1);
					} else {
						data.name = parseInt(item.answer) + '星';
					}
					this.$set(optionDescription, parseInt(item.answer) - 1, data.name);
					this.$set(seriesData, parseInt(item.answer) - 1, data);
					this.$set(fixedOrder, parseInt(item.answer) - 1, item)
				})
				question.data = fixedOrder;
				const option = {
					title: {
						text: '评分详情',
						x: 'center'
					},
					xAxis: {
						type: 'category',
						data: optionDescription
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						type: 'bar',
						data: seriesData,
						barWidth: 50
					}]
				}
				this.myChart.setOption(option);
			}
		},
		preQuestion() {
			if (this.questionIndex > 0) {
				this.questionIndex--;
				console.log(this.questionIndex);
				this.$nextTick(() => {
					this.initChartAndTableData();
				})
			}
		},
		nextQuestion() {
			if (this.questionIndex < this.questionList.length - 1) {
				this.questionIndex++;
				this.$nextTick(() => {
					this.initChartAndTableData();
				})
			}
		}
	},
	watch: {
		questionnaire() {
			this.initQuestionnaireData();
		}
	}
})
</script>

<style scoped>
.analysis_page {
	text-align: left;
	padding-left: 30px;
	padding-right: 30px;
	overflow: auto;
	min-height: 650px;
}
.optionpie{
	display: flex;
	justify-content: center;
	margin-top: 20px;
}
</style>
